@extends('admin.public')

@section('content')
    <style>
        #source {
            width: 100%;
            height: 400px;
        }
    </style>
    <div class="col-md-12">
        <section class="panel panel-default">
            <header class="panel-heading">同步记录</header>
            <div class="panel-body">
                <div id="source"></div>
            </div>
        </section>
    </div>

    @if(count($datas) != 0)
        <div class="col-md-12">
            <div class="panel-group m-b" id="accordion2">
                @php
                    $tmpdatas = $datas;
                    rsort($tmpdatas);
                @endphp
                @foreach($tmpdatas as $k => $value)
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapse{{ $k }}">
                                <i class="icon-clock ico text-small"></i> {{ $value['created_at'] }}&nbsp;&nbsp;&nbsp;
                                <i class="icon-direction ico text-small"></i> {{ $value['ip'] }}&nbsp;&nbsp;&nbsp;
                                <i class="icon-eye ico text-small"></i> {{ $value['seo_content_num'] }}
                            </a>
                        </div>
                        <div id="collapse{{ $k }}" class="panel-collapse {{ $k==0?'in':'collapse' }}">
                            <div class="panel-body text-sm">
                                @php
                                    $timeDates = json_decode($value['seo_content'],true);
                                @endphp
                                @foreach($timeDates as $v)
                                    <span class="label bg-info pull-left"
                                          style="display: block;margin: 0 5px 5px 0">{{ ltrim(implode('|',$v),'|') }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

@endsection

@section('css')
@endsection

@section('js')
    <script src="/public/theme/js/echarts.min.js"></script>
    <script>
        $(function () {
            var syncTime = {{ count($datas) }};
            if (syncTime == 0) {
                alert('暂无软件同步信息,请使用软件查询并同步!');
            }
        })
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('source'));

        option = {
            title: {
                text: '关键词全网上线记录',
                subtext: '当前同步 {{ count($datas) }} 次'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    @foreach($datas as $value)
                            @php
                                $time = date('Y-m-d',strtotime($value['created_at']));
                            @endphp
                        '{{ $time }}',
                    @endforeach
                ]
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name: '关键词数量',
                    type: 'line',
                    data: [
                        @foreach($datas as $value)
                            '{{ $value['seo_content_num'] }}',
                        @endforeach
                    ],
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
@endsection